<template>
	<view>
		<u-navbar title="编辑" :autoBack="true" :placeholder="true"></u-navbar>
		<!-- 上传头像 -->
		<view class="upavatar_box">
			<ImgUpload :maxCount="1" :playback="arr" @callback="callback1" />
		</view>
		<!-- 昵称 -->
		<view class="nikename_box flexJ">
			<view class="left_label">昵称</view>
			<view class="right_input">
				<input type="text" v-model="form.nickname" placeholder="请输入昵称">
			</view>
		</view>
		<view class="line"></view>
		<!-- 保存 -->
		<view class="save_btn flexC" @click="setMerchInfo">保存</view>
	</view>
</template>

<script>
	import ImgUpload from '@/components/ImgUpload/ImgUpload.vue'
	export default {
		components: {
			ImgUpload
		},
		data() {
			return {
				form: {
					nickname: '',
					avatar: ""
				},
				arr: [{
					url: "",
				}]
			};
		},
		onLoad() {
			this.getMerchInfo()
		},
		methods: {
			callback1(e) {
				this.form.avatar = e[0].url
				console.log(e);
			},
			//商家信息
			async getMerchInfo() {
				let res = await this.$api.getMerchInfo()
				this.form.nickname = res.data.nickname
				this.arr[0].url = res.data.avatar
				this.form.avatar = res.data.avatar
				// console.log(res);
			},
			// 提交修改信息
			async setMerchInfo() {
				let {
					code,
					msg
				} = await this.$api.setMerchInfo(this.form)
				uni.$u.toast(msg)
				// console.log(res);
				if (code === 1) {
					uni.navigateBack()
				}
			}
		}
	}
</script>


<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.upavatar_box {
		margin: 112rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nikename_box {
		width: 750rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.left_label {
			color: rgba(0, 0, 0, 0.4);
			font-size: 28rpx;
		}

		.right_input {
			text-align: right;
			color: #000;
			font-size: 28rpx;
		}
	}

	.line {
		width: 686rpx;
		height: 2rpx;
		opacity: 1;
		background: rgba(248, 249, 254, 1);
	}

	.save_btn {
		margin: 360rpx auto 0;
		width: 424rpx;
		height: 88rpx;
		border-radius: 600rpx;
		opacity: 1;
		background: rgba(128, 110, 254, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-weight: 700;
	}
</style>
